import React from 'react'
import { Modal, message, Radio, Button, Select, Input, Form, InputNumber, } from 'antd';
import './wzCss/tyhPublic.css'
import { inject, observer } from 'mobx-react'
const { Option } = Select;
const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 16 },
};
@inject('wz')
@observer
class TYHpublic extends React.Component {
    constructor() {
        super()
        this.state = {
            radio: '通过审核',
            inputtext: '',
            selectValue: '全部',
            visible: false,
            disabled: true,
            //添加btn
            newAddVisible: false,
            newAddSelectValue: '',
            ac_name: '',
            ac_content: '',
            ac_start: '',
            ac_end: '',
            ac_num: '',
            ac_state: ''
        }
    }
    static getDerivedStateFromProps(nextprops) {
        const { type } = nextprops
        return {
            ac_name: type,
            ac_state: '等待审核'
        }
    }
    inputChange = (e) => {
        this.setState({
            inputtext: e.target.value
        })
    }
    reset = () => {
        this.props.zzreset()
        this.setState({
            inputtext: '',
            selectValue: '全部',
            disabled: true
        })
    }
    selectChange = (e) => {
        console.log(e);
        e === '等待审核' ? this.setState({ disabled: false, selectValue: e }) : this.setState({ disabled: true, selectValue: e })
        if (e === '全部') {
            this.props.select()
        } else {
            this.props.select(e)
        }

    }
    shenheshowModal = () => {
        this.setState({
            visible: true,
        });
    };

    shenheOk = async e => {
        // console.log(this.state.radio);
        this.setState({
            visible: false,
            selectValue: '全部'
        });
        await this.props.wz.shenhe(this.state.radio)
        message.success('操作成功')
        this.props.numsDone()
    };

    shenheCancel = e => {
        this.setState({
            visible: false,
        });
    };

    RadioChange = (e) => {
        this.setState({
            radio: e.target.value
        })
    }
    kidSearch = () => {
        let text = this.state.inputtext
        if (text) {
            this.props.searchBtn(text)
        } else {
            message.info('请输入搜索内容')
        }
    }
    //添加
    addActivity = () => {
        this.setState({
            newAddVisible: true
        })
    }
    addModalClose = () => {
        this.setState({
            newAddVisible: false
        })
    }
    addModalOK = () => {
        let obj = {
            name: this.state.ac_name,
            building: this.state.newAddSelectValue,
            activeContent: this.state.ac_content,
            startTime: this.state.ac_start,
            endTime: this.state.ac_end,
            activeState: this.state.ac_state,
            num: this.state.ac_num,
        }
        this.props.wz.addNew(obj)
        this.setState({
            newAddVisible: false,
        })
    }
    contentChange = (e) => {
        this.setState({
            ac_content: e.target.value
        })
    }
    dateStart = (e) => {
        this.setState({
            ac_start: e.target.value
        })
    }
    dateEnd = (e) => {
        this.setState({
            ac_end: e.target.value
        })
    }
    inputnumberChange = (e) => {
        this.setState({
            ac_num: e
        })
    }
    newAddSelectChange = (e) => {
        console.log(e)
        this.setState({
            newAddSelectValue: e
        })
    }
    render() {
        return (
            <div style={{ display: 'flex', justifyContent: 'space-between', padding: '0 0 10px' }}>
                <div>
                    <Button disabled={this.state.disabled} onClick={this.shenheshowModal}>批量审核</Button>
                    <Button onClick={this.addActivity}>添加{this.props.type}</Button>
                </div>
                <div style={{ width: '510px' }}>
                    <span className='spanStyle'>活动状态</span>
                    <Select value={this.state.selectValue} style={{ width: 120 }} onChange={this.selectChange}>
                        <Option value="全部">全部</Option>
                        <Option value="通过审核">通过审核</Option>
                        <Option value="未通过审核">未通过审核</Option>
                        <Option value="等待审核">等待审核</Option>
                        <Option value="已结束">已结束</Option>
                    </Select>
                    <span className='spanStyle'>关键词</span>
                    <Input onChange={this.inputChange} value={this.state.inputtext} style={{ width: '20%' }} placeholder='活动内容' />
                    <Button onClick={this.kidSearch}>搜索</Button>
                    <Button onClick={this.reset}>重置</Button>
                </div>
                <Modal  //批量审核btn
                    style={{ textAlign: 'center' }}
                    title="批量审核"
                    visible={this.state.visible}
                    // onOk={this.handleOk}
                    onCancel={this.shenheCancel}
                    footer={[
                        <Button key="back" onClick={this.shenheCancel}>
                            取消
                        </Button>,
                        <Button key="sure" type="primary" onClick={this.shenheOk}>
                            确定
                        </Button>
                    ]}
                >
                    <Radio.Group onChange={this.RadioChange} defaultValue="通过审核" buttonStyle="solid">
                        <Radio.Button value="通过审核">通过</Radio.Button>
                        <Radio.Button value="未通过审核">不通过</Radio.Button>
                    </Radio.Group>
                </Modal>

                <Modal  //新增
                    title="编辑"
                    visible={this.state.newAddVisible}
                    onCancel={this.addModalClose}
                    footer={[
                        <Button key="back" onClick={this.addModalClose}>
                            取消
                        </Button>,
                        <Button key="ok" type="primary" onClick={this.addModalOK}>
                            确认添加
                    </Button>
                    ]}
                >
                    <Form {...layout}>
                        <Form.Item label="活动标题" >
                            <Input disabled={true} value={this.props.type} />
                        </Form.Item>
                        <Form.Item label="活动内容">
                            <Input value={this.state.ac_content} onChange={this.contentChange} />
                        </Form.Item>
                        <Form.Item label="起始时间">
                            <Input disabled={this.state.ac_start === undefined ? true : false} onChange={this.dateStart} value={this.state.ac_start} />
                        </Form.Item>
                        <Form.Item label="结束时间">
                            <Input disabled={this.state.ac_end === undefined ? true : false} onChange={this.dateEnd} value={this.state.ac_end} />
                        </Form.Item>
                        <Form.Item label="起始报名数" >
                            <InputNumber value={this.state.ac_num} onChange={this.inputnumberChange} />
                        </Form.Item>
                        <Form.Item label="选择楼盘">
                            <Select value={this.state.newAddSelectValue} style={{ width: 120 }} onChange={this.newAddSelectChange}>
                                <Option value="楼盘A">楼盘A</Option>
                                <Option value="楼盘B">楼盘B</Option>
                                <Option value="楼盘C">楼盘C</Option>
                                <Option value="楼盘D">楼盘D</Option>
                            </Select>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        )
    }
}
export default TYHpublic